<template>
  <div class="detail">
    <!-- {{$route.params.id}} -->

    <!-- 头部 -->
    <div class="top">
      <span @click="$router.push('/konwledge')">知识小册</span>
      <span class="separator">/</span>
      <span>{{ DetailPList.title }}</span>
    </div>

    <div class="contain">
      <!-- 左部分 -->

      <div class="left">
        <h3>{{ DetailPList.title }}</h3>
        <!-- 详情图片 -->
        <div class="pic">
          <img :src="DetailPList.cover" alt="" />
        </div>
        <!-- 详情文字 -->
        <div class="text">
          <p class="title">{{ DetailPList.title }}</p>
          <p class="read">{{ DetailPList.title }}阅读笔记</p>
          <p class="time">
            <span>{{ DetailPList.views }}次阅读</span>
            <span class="timestyle">·</span>
            <span>{{ DetailPList.publishAt | formatDate }}</span>
          </p>
          <div
            class="btnbox"
            @click="toSonDetail(DetailPList.id, DetailPList.children[0].id)"
          >
            <button class="btn">
              <span>开始阅读</span>
            </button>
          </div>
        </div>

        <ul>
          <li
            v-for="(items, id) in DetailPList.children"
            :key="id"
            @click="toDetail(items.id)"
          >
            <a>
              <span @click="toDetail()"> {{ items.title }}</span>
              <span class="disappear"
                >{{ items.updateAt | formatDate }}
                <span
                  role="img"
                  aria-label="right"
                  class="anticon anticon-right"
                  ><svg
                    viewBox="64 64 896 896"
                    focusable="false"
                    data-icon="right"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
                    ></path></svg
                ></span>
              </span>
            </a>
          </li>
        </ul>
      </div>

      <!-- 右部分 -->
      <div class="right">
        <div class="sticky">
          <h3>其他知识笔记</h3>
          <div v-for="item in knowlist" :key="item.id">
            <KnowledgeItem :item="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import KnowledgeItem from "@/components/Konwledge/KnowledgeItem.vue";
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState({
      DetailPList: (state) => state.knowledge.DetailPList,
      knowlist: (state) => state.knowledge.knowlist,
    }),
  },
  methods: {
    ...mapActions({
      getPid: "knowledge/getDetail",
      getknow: "knowledge/getKnowLedge",
    }),
    toSonDetail(pid, kid) {
      // console.log(pid, kid);
      this.$router.push(`/konwledge/${pid}/${kid}`);
    },
    toDetail(id) {
      // console.log(id);
      // window.location.href="http://www.baidu.com"
      // let newUrl=this.$router.resolve({
      //   path:`/konwlege/${this.DetailPList.id}/${id}`,
      //   params:id
      // })
      // console.log(newUrl);
      // // 跳转到新开的页面
      // window.open(newUrl.href)
      this.$router.push(`/konwledge/${this.DetailPList.id}/${id}`);
    },
  },
  // 监听一下id的改变
  watch: {
    $route() {
      // console.log('arguments...', arguments);
      // console.log(arguments[0].params.id);
      // console.log(arguments[1].params.id);
      if (arguments[0].params.id !== arguments[1].params.id) {
        // console.log("他们是不相等的");
        // console.log(this);this上有这个方法
        this.getPid({ id: arguments[0].params.id });
      }
    },
  },
  created() {
    this.getPid({ id: this.$route.params.id });
    this.getknow();
  },
  components: {
    KnowledgeItem,
  },
};
</script>

<style lang="scss" scoped>
.detail {
  flex-direction: column;
  .contain {
    display: flex;
    flex: 1;
  }
}
.top {
  width: 100%;
  padding-top: 1rem;
  span {
    color: var(--second-text-color) !important;
    font-size: 14px;
  }
  .separator {
    margin: 0 8px;
  }
}
.contain {
  h3 {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    margin-left: 5px;
  }
}
.left {
  padding: 10px;
  .pic {
    width: 100%;
    height: 275px;
    border-radius: var(--border-radius);
    margin: 1rem auto;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      border-top-right-radius: var(--border-radius);
      border-top-left-radius: var(--border-radius);
      object-fit: cover;
    }
  }
  .text {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    .title {
      color: var(--main-text-color);
      overflow: hidden;
      font-weight: 600;
      font-size: 16px;
      line-height: 22px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .read {
      display: -webkit-box;
      max-width: 100%;
      margin-top: 0.8rem;
      color: var(--second-text-color);
      overflow: hidden;
      font-size: 14px;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .time {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.4rem;
      color: #8590a6;
      font-size: 14px;
      line-height: 20px;
    }
    .timestyle {
      margin: 0 4px;
    }
    .btnbox {
      margin: 0.8rem;
    }
    .btn {
      line-height: 1.5715;
      position: relative;
      display: inline-block;
      font-weight: 400;
      white-space: nowrap;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      user-select: none;
      touch-action: manipulation;
      height: 32px;
      padding: 4px 15px;
      font-size: 14px;
      border-radius: 2px;
      color: #fff;
      border: 1px solid #d9d9d9;
      background: #f40a12;
    }
  }
}
ul {
  margin-top: 20px;
}
ul > li {
  height: 44px;
}
ul > li > a {
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  font-size: 14px;
  line-height: 20px;
  padding-left: 12px;
  padding-right: 16px;
}
ul li a .disappear {
  display: none;
}
a:hover {
  color: red;
  background-color: #eee;
  .disappear {
    display: block;
  }
}
.right {
  background-color: #fff;
  h3 {
    font-size: 16px;
  }
}
.right .sticky {
  position: sticky;
  transform: translateY(0px);
  margin-top: 0px;
  top: 1rem;
  margin-bottom: 1rem;
}
</style>